<template>
  <div class="LeftTop">
    <div class="RobotsNumbers">
      <div class="left"></div>
      <div class="right">
        <div class="title">
          {{ lefttopdata[0] && lefttopdata[0].total.title }}
        </div>
        <div class="numbers">
          <div class="bottom">
            {{ lefttopdata[0] && lefttopdata[0].total.num }}
          </div>
          <div class="top">
            {{ lefttopdata[0] && lefttopdata[0].total.num }}
          </div>
        </div>
        <div class="barline">
          <div class="bar">
            <div
              class="blue"
              :style="{
                width: lefttopdata[0] && lefttopdata[0].total.rate + '%',
              }"
            ></div>
          </div>
          <div class="rate">
            {{ lefttopdata[0] && lefttopdata[0].total.rate }}%
          </div>
        </div>
      </div>
    </div>
    <div class="Rate">
      <div class="PerRate">
        <div class="logo logo1 aligncenter"></div>
        <div class="rate aligncenter">
          <div class="title aligncenter">
            {{ lefttopdata[0] && lefttopdata[0].rates[0].ratename }}
          </div>
          <div class="ratenumber aligncenter">
            <div class="bottom">
              {{ lefttopdata[0] && lefttopdata[0].rates[0].rate }}%
            </div>
            <div class="top">
              {{ lefttopdata[0] && lefttopdata[0].rates[0].rate }}%
            </div>
          </div>
        </div>
      </div>
      <div class="PerRate">
        <div class="logo logo2 aligncenter"></div>
        <div class="rate aligncenter">
          <div class="title aligncenter">
            {{ lefttopdata[0] && lefttopdata[0].rates[1].ratename }}
          </div>
          <div class="ratenumber aligncenter">
            <div class="bottom">
              {{ lefttopdata[0] && lefttopdata[0].rates[1].rate }}%
            </div>
            <div class="top">
              {{ lefttopdata[0] && lefttopdata[0].rates[1].rate }}%
            </div>
          </div>
        </div>
      </div>
      <div class="PerRate">
        <div class="logo logo3 aligncenter"></div>
        <div class="rate aligncenter">
          <div class="title aligncenter">
            {{ lefttopdata[0] && lefttopdata[0].rates[2].ratename }}
          </div>
          <div class="ratenumber aligncenter">
            <div class="bottom">
              {{ lefttopdata[0] && lefttopdata[0].rates[2].rate }}%
            </div>
            <div class="top">
              {{ lefttopdata[0] && lefttopdata[0].rates[2].rate }}%
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getLeftTop } from "../assets/api/api";
export default {
  data() {
    return {
      lefttopdata: [],
      timer: null,
    };
  },
  created() {
    this.fetchData();
    this.timer = setInterval(() => {
      this.fetchData();
    }, this.schedule);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    fetchData() {
      getLeftTop().then((res) => {
        this.lefttopdata = res.data.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.aligncenter {
  text-align: center;
  margin: 0 auto;
}
.dv-capsule-chart {
  padding: 0;
}
.LeftTop {
  .RobotsNumbers {
    height: 140px;
    margin-top: 58px;
    margin-left: 57px;
    .left {
      width: 131px;
      height: 122px;
      float: left;
      margin-top: 4px;
      margin-right: 29px;
      background-image: url("../assets/v1_机器人.gif");
    }
    .right {
      float: left;
      .title {
        padding-left: 2px;
        font-size: 19px;
        // font-family: zcool-gdh;
        font-weight: 700;
        line-height: 20px;
        background-image: -webkit-linear-gradient(bottom, #6bedff, #3db2ff);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .numbers {
        margin-top: 16px;
        font-size: 60px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 600;
        line-height: 50px;
        .bottom {
          text-shadow: 2px 2px 6px rgb(255, 156, 0);
        }
        .top {
          position: absolute;
          margin-top: -50px;
          z-index: 100;
          background-image: -webkit-linear-gradient(bottom, #ffea00, #ff9c00);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .barline {
        margin-top: 18px;
        display: flex;
        .bar {
          width: 464px;
          height: 26px;
          background-image: url("../assets/v8_进度条.png");
          border-radius: 13px;
          overflow: hidden;
          .blue {
            height: 24px;
            background-image: url("../assets/v8_进度条亮2.png");
            background-position-y: -1px;
            border-radius: 7px;
            border: 0.1px solid #6abdfc;
          }
        }
        .rate {
          margin-left: 13px;
          justify-content: center;
          font-family: SourceHanSansCN-Medium;
          font-size: 26px;
          line-height: 26px;
          color: #ffae00;
        }
      }
    }
  }
  .Rate {
    margin-top: 30px;
    margin-left: 59px;
    display: flex;
    .PerRate {
      width: 194px;
      height: 280px;
      margin: 0 25.5px;
      .logo1 {
        background-image: url("../assets/v1_任务完成率.png");
      }
      .logo2 {
        background-image: url("../assets/v1_成功率.png");
      }
      .logo3 {
        background-image: url("../assets/v1_负载率.png");
      }
      .logo {
        width: 106px;
        height: 106px;
      }
      .rate {
        width: 194px;
        height: 144px;
        margin-top: 15px;
        background-image: url("../assets/v1_底图形.gif");
        background-position-y: 10px;
        background-repeat: no-repeat;
        font-family: DINCondensed-Bold;
        font-size: 50px;
        .title {
          font-family: SourceHanSansCN-Regular;
          font-size: 26px;
          color: white;
        }
        .ratenumber {
          margin-top: 12px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 50px;
          font-weight: 550;
          background-image: -webkit-linear-gradient(bottom, #ffea00, #ff9c00);
          background-clip: text;
          -webkit-text-fill-color: transparent;
          .bottom {
            float: left;
            margin: 0 50px;
            text-shadow: 2px 2px 6.8px rgb(255, 194, 95);
          }
          .top {
            position: absolute;
            margin: 0 50px;
            float: left;
            z-index: 100;
            background-image: -webkit-linear-gradient(bottom, #ffea00, #ff9c00);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
}
</style>
